Skip to main content

Spike - Auth0 Liquid Templates

Overview​

You can customize the New Universal Login pages by providing a page template using the Liquid template language. To learn more about Liquid, see the link below in the resources. You can update the ULP templates using the Management API or via the CLI. Just to note this capability can only be used if the tenant has Custom Domains enabled.

Because of this we have put together a small POC which allows us to build and view liquid templates with the standard styled Universal Login widget. This can be found here

Page templates let you define the content displayed around the Universal Login widgets (e.g., the Login box, the MFA box). The same template is used for all pages, helping you implement a consistent, branded login experience with less effort. However the templates

The simplest template you can write is:

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body></html>

The following tags must be present in the template:

auth0:widget - Includes the HTML for the widget that is displayed in every page (e.g., Login, Reset Password) auth0:head - Includes tags that are required to render the widget

Page template variables​

The page templates have a set of context variables that can be used to impact how the page is rendered. This allows you to implement scenarios like:

  • Render different content depending on the Application (for example different content for web or mobile).
  • Render different content depending on the Prompt (for example, different messaging on the Login page vs the Register page).
  • Add a footer with links to the support pages.

A complete list of variables can be found here

Using the Auth0 CLI​

You can use the Auth0 CLI to easily update Page Templates.

In the Auth0 CLI, run:

auth0 branding templates update

The Auth0 CLI will open two windows:

  • A browser window with a Storybook that shows the login page with the page template applied.
  • The default editor, with the page template code.

Note as explained above this is only possible with Custom Domains enabled.

Resources​